<template>
  <div class="signed-agreenment-view view-container">

    <header-module left-custom padding>
      <template #left-con>
        <div>
          <span style="font-size: 16px; margin-right: 20px">区域招商要素：{{ datas.agentProductNumber }}</span>
          <el-tag size="small" type="warning">
            {{ getLabel('agreement_status', datas.agentProductStatus) }}
<!--            <span v-if="datas.agentProductDevStatus && datas.agentProductStatus == 2">[{{-->
<!--                getLabel('agent_product_dev_status', datas.agentProductDevStatus)-->
<!--              }}]</span>-->
          </el-tag>
        </div>
      </template>

      <template #btn>
        <el-button class="main-btn" size="small" @click="onBack">返回</el-button>
        <el-button
                v-auth="{v:['crm:cooperation:signed:pms'],bool:datas.agentProductStatus == -1 || datas.agentProductStatus == -2 || datas.flowStatus==='REJECT_INITIATOR' || datas.flowStatus==='REPEAL'}"
            class="delete-btn" size="small" @click="onDelete">删除
        </el-button>
        <template v-if="datas.agentProductStatus == 2">
          <el-button
              v-auth="{v:['crm:cooperation:signed:pms'],bool:datas.flowStatus!='DOING' && datas.agentProductStatus == 2}"
              class="main-btn" size="small" type="primary" @click="onInvalid">作废
          </el-button>
          <el-button
              v-auth="{v:['crm:cooperation:signed:pms'],bool:datas.flowStatus!='DOING' && (datas.processDefinitionKey != 'agentProductChangePrice' || datas.processDefinitionKey != 'agentPersonProductChangePrice')}"
              class="main-btn" size="small" type="primary" @click="onChange">变更
          </el-button>
        </template>
      </template>

    </header-module>

    <div class="main-content">

      <item-title title="基本信息"/>

      <el-form :inline="true" class="filter-form-inline" label-position="right" label-width="130px" size="small">
        <el-row v-if="agent.agentType == 'agent'" style="margin-left: 0px;margin-right:0px;">
          <el-col :span="8">
            <el-form-item label="代理名称：" style="width: 100%;">
              <el-link :underline="false" style="display: flex;align-items: center;justify-content: flex-start" type="primary"
                       @click="agentClick">
                {{ agent.agentName }}
              </el-link>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="所在地区：" style="width: 100%;">
              <span>{{ agent.provinceName }}/{{ agent.cityName }}/{{ agent.areaName }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="详细地址：" style="width: 100%;">
              <span>{{ agent.address }}</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row v-else style="margin-left: 0px;margin-right:0px;">
          <el-col :span="8">
            <el-form-item label="代理名称：" style="width: 100%;">
              <el-link :underline="false" style="display: flex;align-items: center;justify-content: flex-start" type="primary"
                       @click="agentClick">
                {{ agent.userName }}
              </el-link>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="联系电话：" style="width: 100%;">
              <span>{{ agent.tel }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="联系地址：" style="width: 100%;">
              <span>{{ agent.address }}</span>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <agreementInfoView :agent="agent" :datas="datas" @onUpdate="invalidSuc"/>

      <template v-if="datas.agentProductStatus == 2">
        <item-title title="修改记录"/>

        <operation-view mode="agent_product"/>
      </template>


      <!--      <el-tabs v-model="activeName" class="elTabs">-->
      <!--        <el-tab-pane label="基本信息" name="infomationView">-->
      <!--          <agreementInfoView v-if="activeName=='infomationView'" :datas="datas" :agent="agent" @onUpdate="invalidSuc" />-->
      <!--        </el-tab-pane>-->
      <!--        <el-tab-pane v-if="datas.agentProductStatus == 2" label="配送终端" name="tradingTerminal">-->
      <!--          <terAndDisView v-if="activeName=='tradingTerminal'" />-->
      <!--        </el-tab-pane>-->
      <!--        <el-tab-pane v-if="datas.agentProductStatus == 2" label="修改记录" name="operationView">-->
      <!--          <operation-view v-if="activeName=='operationView'" mode="agent_product" />-->
      <!--        </el-tab-pane>-->
      <!--      </el-tabs>-->

    </div>

    <invalidProductDialog ref="refInvalid" @success="invalidSuc"/>

    <changeProductDialog ref="refChange" :type="agent.agentType" @success="invalidSuc"/>

    <terAndDisDialog ref="terAndDisDialog" @success="invalidSuc"/>

    <detail-drawer
        ref="detailDrawer"
        :size-width="1000"
        custom-title
    >
      <template #title>
        <span>代理商：{{ agent.agentName }}</span>

      </template>
      <template #contents>

        <agent-info :id="agent.id"/>

      </template>
    </detail-drawer>

  </div>
</template>

<script>
import {useRoute, useRouter} from 'vue-router'
import {defineAsyncComponent, defineComponent, getCurrentInstance, inject, onMounted, reactive, toRefs} from 'vue'

export default defineComponent({
  name: 'Index',
  components: {
    agreementInfoView: defineAsyncComponent(() =>
        import('../../../modules/agreementInfoView.vue')
    ),
    invalidProductDialog: defineAsyncComponent(() =>
        import('../../../modules/invalidProductDialog.vue')
    ),
    changeProductDialog: defineAsyncComponent(() =>
        import('../../../modules/changeProductDialog.vue')
    ),
    terAndDisDialog: defineAsyncComponent(() =>
        import('../../../modules/terAndDisDialog.vue')
    ),
    terAndDisView: defineAsyncComponent(() =>
        import('../../../modules/terAndDisView.vue')
    ),
    agentInfo: defineAsyncComponent(
        () => import('../../../../commonView/detailComponents/agent/agentInfo.vue')
    )
  },
  setup() {
    const currentInstance = getCurrentInstance()
    const api = inject('api')
    const route = useRoute()
    const router = useRouter()
    var data = reactive({
      datas: {},
      agent: {},
      activeName: 'infomationView',
      refInvalid: null,
      refChange: null,
      terAndDisDialog: null,
      detailDrawer: null,
    })

    const getStatus = () => {
      switch (data.datas.agentProductStatus) {
        case '-2':
          return '已作废'
        case '-1':
          return '未通过'
        case '1':
          return '审核中'
        case '2':
          return '有效'
      }
    }

    const agentClick = () => {
      data.detailDrawer.open()
    }

    const getData = (id) => {
      api.signedAgent.AGENT_PRODUCT_DETAIL(id).then(res => {
        if (!res.code && res.data) {
          data.datas = res.data.agentProduct
          getAgent()
        }
      })
    }

    const getAgent = () => {
      api.channelAgent.POTENTIALAGENT_DETAIL(data.datas.agentId).then(res => {
        if (!res.code && res.data) {
          data.agent = res.data.data
        }
      })
    }

    const onBack = () => {
      router.back()
    }

    const invalidClick = () => {

    }

    const onChange = () => {
      const a = JSON.parse(JSON.stringify(data.datas))
      data.refChange.openDialog(a)
    }

    const onTerminal = () => {
      data.terAndDisDialog.open(data.datas)
    }

    const onInvalid = () => {
      api.signedAgent.AGENT_PRODUCT_BANJUDGE(data.datas.id).then(res => {
        if (!res.code && res.data) {
          if (res.data.inUse == 1) {
            currentInstance.proxy.customMessage({
              type: 'error',
              message: '该代理与产品有关联的交易信息，暂时无法作废',
            })
          } else {
            const a = JSON.parse(JSON.stringify(data.datas))
            data.refInvalid.openDialog(a)
          }
        }
      })
    }

    const onDelete = () => {
      currentInstance.proxy
          .alertBox({
            message: '删除数据后不可恢复，确认删除？',
            title: '删除',
          })
          .then(() => {
            api.signedAgent.AGENT_PRODUCT_DELETE(data.datas.id).then((res) => {
              if (res.code) {
                currentInstance.proxy.customMessage({
                  type: 'error',
                  message: res.msg,
                })
              } else {
                currentInstance.proxy.customMessage({
                  type: 'success',
                  message: '删除成功',
                })
                onBack();
              }
            })
          })
          .catch((err) => {
            console.log(err)
          })
    }

    const invalidSuc = () => {
      getData(route.query.id)
    }

    onMounted(() => {
      if (route.query.id) {
        getData(route.query.id)
      }
    })

    return {
      ...toRefs(data),

      onBack,
      getStatus,
      onInvalid,
      invalidSuc,
      onChange,
      onTerminal,
      invalidClick,
      onDelete,
      agentClick,
    }
  }
})
</script>

<style scoped>

</style>
